<template>
    <div class="chart-box" ref="chart1">
    </div>
</template>

<script>
import * as echarts from 'echarts'
const xData = [
    '立案庭',
    '刑庭',
    '民一庭',
    '民二庭',
    '知产庭',
    '金融庭',
    '行政庭',
    '执行局',
]
export default {
    name: "JudicialOpenness",
    data() {
        return {
            options: {
                baseOption: {
                    timeline: {
                        show: false,
                        top: 0,
                        data: []
                    },
                    legend: {
                        top: '2%',
                        left: 'center',
                        itemWidth: 10,
                        itemHeight: 10,
                        // itemGap: 343,
                        icon: 'horizontal',
                        textStyle: {
                            color: '#ffffff',
                            fontSize: 12,
                        },
                    },
                    grid: [{
                        show: false,
                        left: '3%',
                        top: '15%',
                        bottom: '1%',
                        containLabel: true,
                        width: '40%'
                    }, {
                        show: false,
                        left: '51.5%',
                        top: '15%',
                        bottom: '1%',
                        width: '0%'
                    }, {
                        show: false,
                        right: '3%',
                        top: '15%',
                        bottom: '1%',
                        containLabel: true,
                        width: '40%'
                    }],
                    xAxis: [{
                        type: 'value',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        position: 'top',
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                    }, {
                        gridIndex: 1,
                        show: false
                    }, {
                        gridIndex: 2,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        position: 'top',
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                    }],
                    yAxis: [{
                        type: 'category',
                        position: 'right',
                        axisLine: {
                            show: false,
                        },

                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        data: xData
                    }, {
                        gridIndex: 1,
                        type: 'category',
                        inverse: true,
                        position: 'left',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            padding: [0, 0, 0, 0],
                            textStyle: {
                                color: '#ffffff',
                                fontSize: 16
                            },
                            align: "center"

                        },
                        data: xData.map(function (value) {
                            return {
                                value: value,
                                textStyle: {
                                    align: 'center'
                                }
                            }
                        })
                    }, {
                        gridIndex: 2,
                        type: 'category',
                        inverse: true,
                        position: 'left',
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false

                        },
                        data: xData
                    }],
                    series: []

                },
                options: [{
                    series: [{
                        name: "裁判文书上午（件数）",
                        type: "bar",
                        barWidth: 11,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: "rgb(58, 117, 206)"
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(74, 223, 228)'
                                }
                                ]),
                                barBorderRadius: [50, 50, 50, 50],
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'left',
                                textStyle:{
                                    color:'#fff'
                                }
                            }
                        },
                        data: [3, 20, 62, 34, 55, 65, 33, 65, 33],
                        animationEasing: "elasticOut"
                    },
                    {
                        name: "庭审录播（场次）",
                        type: "bar",
                        stack: "2",
                        barWidth: 11,
                        xAxisIndex: 2,
                        yAxisIndex: 2,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgb(249, 217, 69)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(242, 154, 64)'
                                }
                                ]),
                                barBorderRadius: [50, 50, 50, 50],
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle:{
                                    color:'#fff'
                                }
                            }
                        },
                        data: [3, 20, 62, 34, 55, 65, 33, 65, 33],
                        animationEasing: "elasticOut"
                    },
                    ]
                }]
            }
        }
    },
    mounted() {

        setTimeout(() => {
            const chart = echarts.init(this.$refs.chart1)
            chart.setOption(this.options)
        }, 0)
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 225px;
    display: flex;
    width: 100%;
}
</style>